<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.height {
				background-color: deeppink;
			}
		</style>
	</head>

	<body>
		<!--			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.			
		-->
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>
		<button class="num">从大到小</button>
		<button class="back">反选</button>
		<button class="all">全选</button>
		<table border="1" cellspacing="0" cellpadding="10">
			<tr>
				<th>序列号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
				<th>选择</th>
			</tr>

		</table>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
			];
			var add = $(".add"),
				del = $(".del"),
				sort = $(".sort"),
				tb = $("tbody"),
				num = $(".num"),
				back = $(".back"),
				all = $(".all"),
				height = $(".height"),
				index = 0,

				new_tr = $("<tr><td>" + (index + 1) + "</td><td>" + info[index].name + "</td><td>" + info[index].age + "</td><td><button>删除</button></td><td><input type='checkbox'/></td></tr>");
			add.on("click", function() {
				new_tr = $("<tr><td>" + (index + 1) + "</td><td>" + info[index].name + "</td><td>" + info[index].age + "</td><td><button>删除</button></td><td><input type='checkbox'/></td></tr>");
				tb.append(new_tr);
				//			    ++index>=info.length?index==0:"";
				++index;
				if(index >= info.length) {
					index = 0;
				}
			});
			del.on("click", function() {
				var checkboxs = $("input");
				console.log(checkboxs);
				checkboxs.each(function(i) {
					if(checkboxs.eq(i).is(":checked")) {
						checkboxs.eq(i).parent().parent().remove()
					}
				})

				/*
				 *1.获取多选框
				 * 2.判断是否选中
				 * 3.根据选中状态删除所在的行
				 *
				 */
			});
			//button事件
			tb.on("click", function(e) {
				if(e.target.nodeName == "BUTTON") {
					$(e.target).parent().parent().remove();
				}
			});
			//排序
			sort.on("click", function() {
				var trs = $("tr"),
					trs_arr = new Array();
				$(trs).each(function(i) {
					trs_arr.push(trs.eq(i));
				})
				trs_arr.sort(function(a, b) {
					return a.children().eq(2).html() - b.children().eq(2).html();
				});
				$(trs_arr).each(function(i) {
					tb.append(trs_arr[i]);
				})
				console.log(trs_arr);
			});
			//			从大到小
			num.on("click", function() {

				var trs = $("tr"),
					trs_arr = new Array();
				$(trs).each(function(i) {
					trs_arr.push(trs.eq(i));
				})
				trs_arr.sort(function(a, b) {
					return a.children().eq(0).html() - b.children().eq(0).html();
				});
				$(trs_arr).each(function(i) {
					tb.append(trs_arr[i]);
				})
			});
			//全选
			all.on("click", function() {
				var checkboxs = $("input"),
					cou = 0;
				cou++;
				if(cou < 2) {
					for (var i = 0; i < checkboxs.length; i++) {						
						if(!checkboxs.eq(i).is(":checked")) {
							checkboxs.eq(i).prop("checked","true");
							checkboxs.eq(i).parent().parent().toggleClass("height")
						}
					}					
				}
				if(cou == 2) {
					cou = 0;
				}
			});
			//反选
						back.on("click", function() {
							var checkboxs = $("input");
							for(var i = 0; i < checkboxs.length; i++) {
								if(!checkboxs.eq(i).is(":checked")) {
									checkboxs.eq(i).prop("checked",true);
									checkboxs.eq(i).parent().parent().addClass("height")
								} else {
									checkboxs.eq(i).prop("checked",false);									
									checkboxs.eq(i).parent().parent().removeClass("height")
								}
							}
						});
			//高亮
						tb.on("click", function(e) {
							if(e.target.nodeName == "INPUT") {
								$(e.target).parent().parent().toggleClass("height");
							}
						});
		</script>
	</body>
 
</html>